<template>
    <div>
        <!-- <van-nav-bar title="标题" /> -->
         <biaoti title="全部"></biaoti>
         <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <van-tabs v-model:active="active">
            <van-tab title="全部">
                <!-- <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in list" :key="image">
                        <img :src="image.image_src" style="width: 100%;"/>
                    </van-swipe-item>
                </van-swipe> -->
                <!-- <van-search v-model="value" @click="toPush()" disabled placeholder="请输入搜索关键词" /> -->
                 <seachs></seachs>
                <lunbotu :list="list"></lunbotu>

                <van-grid :border="false" :column-num="4">
                    <van-grid-item v-for="(v,i) in navlist" :key="i">
                        <van-image :src="v.image_src" />
                    </van-grid-item>
                </van-grid>

                <van-grid :border="false" :column-num="2">
                    <van-grid-item v-for="(v, i) in listData" :key='i' :style="i % 2 == 0 ? 'height:19rem' : 'height:26rem'">
                        <van-image
                            :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                        <p>{{ v.goods_name }}</p>
                    </van-grid-item>

                </van-grid>


                


            </van-tab>
            <van-tab title="分类">内容 2</van-tab>
            <van-tab title="购物车">内容 3</van-tab>
            <van-tab title="我的">内容 4</van-tab>
        </van-tabs>
        </van-pull-refresh>
    </div>
</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
import { ref } from 'vue';
import { swiperdataApi, searchApi, catitemsApi } from '@/api/api';
import lunbotu from '@/components/lunbotu.vue';
import biaoti from '@/components/biaoti.vue';
import seachs from '@/components/seachs.vue';
import { showToast } from 'vant';
let list = ref("")
const getlist = () => {
    swiperdataApi().then(res => {
        list.value = res.data.message
    })
}
getlist()

let listData = ref("")
const getData = () => {
    searchApi().then(res => {
        listData.value = res.data.message.goods
    })
}
getData()
let navlist = ref("")
const getDatacati = () => {
    catitemsApi().then(res => {
        console.log(res);
        navlist.value = res.data.message
    })
}
getDatacati()
 const loading = ref(false);
const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        getlist()
        getData()
        getDatacati()
      }, 1000);
    };


// import { useRoute, useRouter } from 'vue-router'

// const router = useRouter()
// const route = useRoute()
// const toPush=()=>{
//     router.push('/seach')
// }

</script>

<style lang="scss" scoped></style>
